<template>
  <div class="management-merchant views-container">
    <div class="wlm-table">
      <div class="wlm-dialog-content">
          <!-- :model="formFormatData.formData" :rules="formFormatData.rules" -->
            <el-form ref="treasure" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="130px" class="retail-form" label-position="right">
                 <el-form-item label="微信回复标题">
                     <el-input v-model.trim="formFormatData.formData.weixin_reply_content" placeholder="请输入微信回复标题" style="width:60%;"></el-input>
                    
                </el-form-item>
                <el-form-item label="名称">
                     <el-input v-model.trim="formFormatData.formData.title" placeholder="请输入名称" style="width:60%;"></el-input>
                </el-form-item>
                  <!-- <el-form-item label="使用说明">
                     <el-input  style="width:60%;"></el-input>
                </el-form-item> -->
                <el-form-item label="支付价格">
                     <el-input-number  style="width:60%;" v-model="formFormatData.formData.price" placeholder="请输入支付价格" :controls="false"></el-input-number>
                       <div class="form-help">注：填0表示免费</div>
                </el-form-item>
                 <el-form-item label="显示价值">
                     <el-input-number  style="width:60%;" v-model="formFormatData.formData.show_price" placeholder="请输入显示价值" :controls="false"></el-input-number>
                </el-form-item>
                   <el-form-item label="活动渠道" prop="source">
                             
                                 <el-checkbox v-model="checked" disabled>微信公众号</el-checkbox>
                        </el-form-item>
                 <el-form-item label="商品图">
                       <choose-files ref="chooseFiles" :config="choosePlatformConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                        <div class="form-help">建议尺寸：大小2M以下,建议尺寸640×384px</div>
                </el-form-item>
                 <el-form-item label="海报图片">
                       <choose-files ref="chooseFiles" :config="choosePosterformConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                        <div class="form-help">建议尺寸：大小2M以下,建议尺寸750×1334px</div>
                </el-form-item>
                  <el-form-item label="海报设置" v-if="formFormatData.formData.poster.length>0">
                      <div class="poster-wrap">
                          <div class="poster-box"  v-bind:style="{'background-image':`url(${getPath('drag-bg.png')})`}">
                                  <!-- 背景图 -->
                                 <div v-for="(item,index) in formFormatData.formData.poster" :key="index" style="position: absolute;">
                                    <img :src="item.file_path" style="width: 375px; height: 667px;position: relative;">
                                </div>
                              <div class="poster-img">
                                  <!-- 拖动组件 -->
                                <vue-draggable-resizable :w="112" :h="112" :x="x" :y="y" @dragging="onDrag" @resizing="onResize" :parent="true" :resizable ="false">
                                    <img src="../../assets/image/11.png" style="width:110px;height:110px;">
                                </vue-draggable-resizable>
                                <vue-draggable-resizable :w="50" :h="50" :x="x1"  :y="y1" @dragging="onResizedata" @resizing="onResize" :parent="true" :resizable ="false" >
                                    <img src="../../assets/store/default_avatar.png" style="width:50px;height:50px;">
                                </vue-draggable-resizable>
                              </div>
                              <div class="poster-reset" @click="resetbtn">重置</div>
                          </div>
                          <div class="poster-buttom">
                                <p>海报图设计说明：（设计图宽度为750px时）</p>
                                <p>头像（方型）尺寸为 100 * 100px</p>
                                <p>二维码（方型）尺寸为 220 * 220px</p>
                                <p>小技巧：</p>
                                <p> 1、把头像拖拽到二维码上面，可以隐藏头像</p>
                                <p>2、当头像、二维码拖拽模块出现偏离屏幕、无法拖动等异常情况，可使用“重置”按钮进行复位操作</p>
                          </div>
                      </div>
                </el-form-item>
                 <el-form-item label="助力人数">
                     <el-input  style="width:60%;" v-model="formFormatData.formData.assist_num" placeholder="请输入助力人数"></el-input>
                </el-form-item>
                 <el-form-item label="库存数">
                     <el-input  style="width:60%;" v-model="formFormatData.formData.stock" placeholder="请输入库存数"></el-input>
                </el-form-item>
                 <el-form-item label="商家">
                      <div style="display:flex;">
                        <el-select
                          :disabled="!!formFormatData.api['editForm']['params']['id']"
                          filterable
                          v-model="formFormatData.formData.bus_id"
                          placeholder="请选择商家"
                          @change="selectChanged">
                        <el-option v-for="item in shopData" :disabled="item.storenum==0" :key="item.value" :label="item.name" :value="item.id"></el-option>
                      </el-select>

                      <el-select
                            v-model="formFormatData.formData.store_ids"
                            multiple
                            collapse-tags
                            placeholder="请选择门店"
                            v-if="!!formFormatData.formData.bus_id" style="margin-left:10px;">
                        <el-option
                            v-for="item in store_name"
                            :disabled="item.storenum==0"
                            :value-key="item.name"
                            :key="item.value"
                            :label="item.name"
                            :value="item.id.toString()"></el-option>
                      </el-select>
                      </div>
                </el-form-item>
                  <el-form-item label="活动有效期">
                       <el-date-picker :picker-options="pickerOptions" v-model="formFormatData.formData.assist_stime" value-format="timestamp" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']"></el-date-picker>
                </el-form-item>
                <el-form-item label="核销有效期">
                    <el-date-picker :picker-options="pickerOptions" v-model="formFormatData.formData.check_etime" value-format="timestamp" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']"></el-date-picker>
                </el-form-item>
                <el-form-item label="核销提醒">
                    <el-input
                        type="textarea"
                        :rows="10"
                        placeholder="请输入核销提醒"
                        style="width:60%"
                        v-model="formFormatData.formData.check_tips">
                        </el-input>
                </el-form-item>
                <el-form-item label="介绍文案">
                    <div style="width:60%; background-color: rgb(245, 245, 245);font-size: 14px;margin-bottom: 20px;color: rgb(96, 98, 102);padding:20px;border-radius: 4px;border: 1px solid #ebeef5;">
                        <!-- 例:
                            <p>☄全新分销任务上线啦！更丰富的奖励兑换,更高额的佣金返现!100人任务模式变成50人，助新老用户都能更轻松的吃上蛋糕！是不是很动心呢！？</p>
                            <p><a href='http://xxxx'>点击下单</a></p>
                            <p>更多问题请添加幸福君微信号：xxxxxxx</p>
                           <p> <a href='http://xxx'>点击查看我的奖励</a></p> -->
                           例:
                           <p>可填入文本信息（替换页面链接地址、小程序链接地址请去“平台=》页面链接”复制）</p> 
                           <p v-text="msg1"></p>
                            <p v-text="msg2"></p>
                            <!-- 可填入文本信息（替换页面链接地址、小程序链接地址请去“平台=》页面链接”复制）
                            页面链接：< a href=" ">描述文字~</ a>
                            小程序链接：< a href="替换页面链接地址（必填）" data-miniprogram-appid="替换小程序appid" data-miniprogram-path="替换小程序链接地址">描述文字~</ a> -->
                    </div>
                    <el-input
                        type="textarea"
                        :rows="10"
                        placeholder="请输入介绍文案"
                        style="width:60%"
                        v-model="formFormatData.formData.content">
                        </el-input>
                </el-form-item>
                 <el-form-item label="老用户是否可助力">
                     <el-switch :inactive-value="1"  :active-value="0"  v-model="formFormatData.formData.old_user_can"></el-switch>
                </el-form-item>
                 <el-form-item label="是否开启活动">
                     <el-switch :inactive-value="0"  :active-value="1"  v-model="formFormatData.formData.status"></el-switch>

                </el-form-item>
            </el-form>
      </div>
    </div>
     <div v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
        <el-button size="small"  @click="formFormatSubmit({ router: { type: 'replace', path: '/application/treasure', code: 1 }})" type="primary">保存</el-button>
        <router-link tag="span" to="/application/treasure">
            <el-button size="small">返回</el-button>
        </router-link>
    </div>
 </div>
</template>
<script>
import {
 AssistAddEdit,
 getAssist
} from '@/api/application'
import {
  shopIndex,
  businessIndex,
} from '@/api/merchant'
import mixins from '@/mixins/mixins'
import ChooseFiles from '@/components/ChooseFiles/index'
export default {
    mixins: [mixins.getters('Form')],
    name: 'treasureAdd',
    components:{
      ChooseFiles,
    },
    data(){
      
        return{
          checked:true,
            msg1:'页面链接：<a href="替换页面链接地址">描述文字~</a>',
            msg2:'小程序链接：<a href="替换页面链接地址（必填）" data-miniprogram-appid="替换小程序appid" data-miniprogram-path="替换小程序链接地址">描述文字~</a>',
            width: 0,
            height: 0,
            x: 0,
            y: 0,
            x1:0,
            y1:0,
            //时间处理，当前时间之前的时间不能选择
            pickerOptions: {
                disabledDate(time) {
                return time.getTime() < Date.now() - 8.64e7
                }
            },
            shopData: [],
            store_name: [],
            choosePosterformConfig: {
                type: ['image'],
                    model: 'display',
                    uploadConfig: {
                    limit: 1,
                    isMore: true,
                    model: 'display'
                    },
                    isUnique: true,//在图片选择器中是否多选
                    initList: [],
                    isShowList: true,
                    file_type: 'image',
                    bindKey: {
                    key: 'poster',
                    model: 'img'
                    }
            },
            choosePlatformConfig: {
                type: ['image'],
                    model: 'display',
                    uploadConfig: {
                    limit: 1,
                    isMore: true,
                    model: 'display'
                    },
                    isUnique: true,//在图片选择器中是否多选
                    initList: [],
                    isShowList: true,
                    file_type: 'image',
                    bindKey: {
                    key: 'img',
                    model: 'img'
                    }
            },
             formFormatData: {
                key: 'treasure',
                api:{
                  editForm:{
                      api:getAssist,
                      params:{
                          id:this.$route.query.id
                      },
                       redirect: 'id',
                      filters: {
                           img: {
                                bindInit: ['choosePosterformConfig', 'choosePlatformConfig']
                            },
                      }
                    },
                  submitForm:AssistAddEdit
                },
                formData:{
                    title:'',
                    weixin_reply_content:'',
                    price:'',
                    show_price:'',
                    img:[],
                    poster:[],
                    assist_num:'',
                    stock:'',
                    bus_id:[],
                    store_ids:[],
                    assist_stime:[],
                    check_etime:[],
                    content:'',
                    check_tips:'',
                    old_user_can:'1',
                    status:'1',
                    code_action:[],
                    head_action:[],
                }
             }
        }
    },
    computed: {
    getPath() {
      return function(path) {
        return (path.includes('https://') || path.includes('http://')) ? `${path}` : require(`@/assets/custorm_style/${path}`)
      }
    }
  },
    created(){
        this.shopDataGet()
        this.selectChanged()
        if(this.$route.query.id){
            this.getAssistbtn()
        }
    },
    methods:{
       
        getAssistbtn(){
            getAssist({id:this.$route.query.id}).then(res=>{
                this.x= Number(res.data.data.code_action[0])
                this.y = Number(res.data.data.code_action[1])
                 this.x1= Number(res.data.data.head_action[0])
                this.y1 = Number(res.data.data.head_action[1])
            })
        },
        //请求商家接口
        shopDataGet() {
            businessIndex({ list_rows: 'all' }).then((response) => {
                const { data: { data: msgData = [] } } = response
                this.shopData = msgData
                
            })
        },
        //请求门店接口
        selectChanged(value) {
            shopIndex({ is_page: '2', bus_id: value }).then(res => {
                this.store_name = res.data.data
            })
        },
        onResize(x, y, width, height) {
            this.x = x
            this.y = y
            this.width = width
            this.height = height
            },
        onDrag(x, y) {
                //  code_action:[],二维码
                //  head_action:[],头像
              this.x=x,
              this.y=y,
            this.formFormatData.formData.code_action = [x,y]
        },
        onResizedata(x1,y1){
            this.x1=x1,
            this.y1=y1,
            this.formFormatData.formData.head_action = [x1,y1]
        },
        resetbtn(){
            this.x=0,
            this.y=0,
            this.x1=0,
            this.y1=0,
              this.formFormatData.formData.code_action = [0,0]
              this.formFormatData.formData.head_action = [0,0]
          },
            
    }
          
}
</script>
<style lang="scss" scoped>
   .form-help{
        color: #999;
    line-height: 14px;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 400;
  }
  .poster-wrap{
    align-items: center;
    display: flex;
    .poster-box{
    position: relative;
    width: 375px;
    height: 667px;
    padding: 102px 22px 115px 23px;
    // background: url(../../assets/image/drag-bg.png) 0px 0px / 100% 100% no-repeat;
    box-sizing: content-box;
    .poster-img{
        position: relative;
        width: 375px;
        height: 667px;
    }
    .poster-reset{
            position: absolute;
            bottom: 22px;
            left: 174px;
            right: 23px;
            text-align: center;
            flex: 0 0 70px;
            width: 70px;
            height: 70px;
            line-height: 70px;
            cursor: pointer;
            border-radius: 50%;
    }
  }
    .poster-buttom{
        padding: 2px 20px;
    background-color: rgb(245, 245, 245);
    border: 1px solid rgb(227, 227, 227);
    margin: 0px 0px 0px 20px;
    border-radius: 4px;
    font-size: 14px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 1px inset;
    }
    .my-class{
    border: 1px dashed #993322;
    }
    .my-class>:active{
        border: 1px solid #555555;

    }
  }
  

</style>